<template>
  <div class="right">
    <div :style="rotate" class="rightcircle"></div>
  </div>
</template>

<script>
import card from '@/components/card'

export default {
  data () {
    return {
      animationData: {},
      rotate: "transform : rotate(45deg)"
    }
  },

  components: {
    card
  },

  methods: {
    rotateAndScale: function () {
      // 旋转同时放大
      this.animation.rotate(45).scale(2, 2).step()
      this.setData({
        animationData: this.animation.export()
      })
    },
    rotateThenScale: function () {
      // 先旋转后放大
      this.animation.rotate(45).step()
      this.animation.scale(2, 2).step()
      this.setData({
        animationData: this.animation.export()
      })
    },
    rotateAndScaleThenTranslate: function () {
      // 先旋转同时放大，然后平移
      this.animation.rotate(45).scale(2, 2).step()
      this.animation.translate(100, 100).step({ duration: 1000 })
      this.setData({
        animationData: this.animation.export()
      })
    }
  },
  computed: {
    animationStyle: function () {
      return "transform : rotate(0deg)"
    },
  },

  created () {
    let rotate = 45;
    setInterval(()=>{
      rotate += 0.1;
      let str = "transform : rotate({}deg)";
      str = str.replace("{}", rotate.toString())
      this.rotate = str
    }, 16);
  },
}
</script>

<style scoped>
  .right{
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
    left: 100px;
  }
  .rightcircle{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
    right: 0;
    border-top:20px solid green;
    border-right:20px solid green;
    /*transform : rotate(45deg); !* 旋转45度 *!*/
  }
</style>
